<template>
    <section class="chart-container">
        <el-row :gutter="20">
            <!--工具条-->
            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                <el-form :inline="true" :model="filters">
                    <el-form-item>
                        <el-date-picker type="month" placeholder="开始年月" v-model="filters.syearmonth" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker type="month" placeholder="结束年月" v-model="filters.eyearmonth" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" v-on:click="getLists">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <!--统计-->
            <el-col :span="6"><div class="grid-content bg-purple">总任务:{{out_data.total}}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">已完成:{{out_data.complete}}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">开发中:{{out_data.develop}}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">已取消:{{out_data.cancel}}</div></el-col>
        </el-row>

        <el-row>
            <el-col :span="20">
                <div id="chartLine" style="width:100%; height:400px;"></div>
            </el-col>
        </el-row>

        <!--列表-->
		<el-table :data="incomelist" highlight-current-row v-loading="listLoading" style="width: 100%;margin-top: 20px;">
			<el-table-column type="index" label="支出" width="100">
			</el-table-column>
            <el-table-column prop="orderNumber" label="订单号" width="200" >
			</el-table-column>
			<el-table-column prop="orderAmount" label="金额" width="150" >
			</el-table-column>
			<el-table-column prop="orderType" label="类型" width="100" :formatter="formatType" >
			</el-table-column>
			<el-table-column prop="createTime" label="订单时间" :formatter="formatDate" min-width="180" >
			</el-table-column> 
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

        <!--列表-->
		<el-table :data="paylist" highlight-current-row v-loading="listLoading" style="width: 100%;margin-top: 20px;">
			<el-table-column type="index" label="收入" width="100">
			</el-table-column>
            <el-table-column prop="orderNumber" label="订单号" width="200" >
			</el-table-column>
			<el-table-column prop="orderAmount" label="金额" width="150" >
			</el-table-column>
			<el-table-column prop="orderType" label="类型" width="100" :formatter="formatType1" >
			</el-table-column>
			<el-table-column prop="createTime" label="订单时间" :formatter="formatDate" min-width="180" >
			</el-table-column> 
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange1" :page-size="10" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
    </section>
</template>

<script>
    import util from '../../common/js/util'
	//import NProgress from 'nprogress'
    import { getStatistic } from '../../api/api';
    import moment from 'moment'
    import echarts from 'echarts'

    export default {
        data() {
            return {
                filters: {
					eyearmonth: '',
					syearmonth: '',
                },
                statistic: [],
                incomelist: [],
                paylist: [],
                out_data: {
                    total:"",
                    complete:"",
                    develop:"",
                    cancel:"",
                },
				total: 0,
                page: 1,
                
                total1: 0,
                page1: 1,
                
				size: 2,
				listLoading: false,

                
                createMonth:[],
                chartLine: null,
            }
        },

        methods: {
            formatType: function (row, column) {
				if(row.orderType == 0){
					return '';
				}else if(row.orderType == 1){
					return '支付押金';
				}else if(row.orderType == 2){
					return '';
				}else{
					return '';
				}
            },
            formatType1: function (row, column) {
				if(row.orderType == 1){
					return '退押金';
				}else if(row.orderType == 2){
					return '发放奖励';
				}else if(row.orderType == 3){
					return '学生奖励';
				}else{
					return '';
				}
            },
            formatDate: function(row, column){
                return moment(row.createTime).format("YYYY-MM-DD HH:mm:ss")
            },
            handleCurrentChange(val) {
				this.page = val;
				this.getLists();
            },
            handleCurrentChange1(val) {
				this.page1 = val;
				this.getLists();
			},
            //获取用户列表
			getLists() {
				let para = {
                    syearmonth: this.filters.syearmonth?moment(this.filters.syearmonth).format("YYYY-MM-DD"):'',
					eyearmonth: this.filters.eyearmonth?moment(this.filters.eyearmonth).format("YYYY-MM-DD"):'',
				};
				this.listLoading = true;
                //NProgress.start();
				getStatistic(para).then((res) => {
                    //console.log("-------------")
                    this.statistic = res.data.data.statistic;
                    var createMonth = [];
                    var totalIncomeAmount = [];
                    var totalPayAmount = [];
                    var totalTaskCount = [];
                    for (let i = 0; i < res.data.data.statistic.length; i++) {
                        createMonth.push(res.data.data.statistic[i].createMonth);
                        totalIncomeAmount.push(res.data.data.statistic[i].totalIncomeAmount);
                        totalPayAmount.push(res.data.data.statistic[i].totalPayAmount);
                        totalTaskCount.push(res.data.data.statistic[i].totalTaskCount);
                    }
                    this.createMonth = createMonth;
                    this.totalIncomeAmount = totalIncomeAmount;
                    this.totalPayAmount = totalPayAmount;
                    this.totalTaskCount = totalTaskCount;


                    this.total = res.data.data.incomelist.length;
                    this.incomelist = res.data.data.incomelist;
                    this.total1 = res.data.data.paylist.length;
                    this.paylist = res.data.data.paylist;

                    this.out_data.total = res.data.out_data.total;
                    this.out_data.complete = res.data.out_data.complete;
                    this.out_data.develop = res.data.out_data.develop;
                    this.out_data.cancel = res.data.out_data.cancel;
                    
					this.listLoading = false;
					//NProgress.done();
				});
			},
            drawLineChart() {
                this.chartLine = echarts.init(document.getElementById('chartLine'));
                this.chartLine.setOption({
                    title: {
                        //text: 'Line Chart'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['总收入', '总支出', '月单量']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.createMonth
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '总收入',
                            type: 'line',
                            stack: '总量',
                            data: this.totalIncomeAmount
                        },
                        {
                            name: '总支出',
                            type: 'line',
                            stack: '总量',
                            data: this.totalPayAmount
                        },
                        {
                            name: '月单量',
                            type: 'line',
                            stack: '总量',
                            data: this.totalTaskCount
                        }
                    ]
                });
            },
            drawCharts() {
                this.drawLineChart()
            },
        },

        mounted: function () {
            this.getLists();
            this.drawCharts()
        },
        updated: function () {
            this.drawCharts()
        }
    }
</script>

<style scoped>
    .chart-container {
        width: 100%;
        float: left;
    }
    /*.chart div {
        height: 400px;
        float: left;
    }*/

    .el-col {
        padding: 10px 10px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
        line-height: 36px;
        text-align: center;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>
